<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-10 18:28:38
 * @LastEditors: xuzehan 935351619@qq.com
 * @LastEditTime: 2024-05-28 15:45:36
 * @FilePath: \ant-design-vue-jeecg-master\src\views\situationDisplay\modules\SXZY.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="windowInfo">
    <div class=" windowInfo1">
      <div class="showBox">
        <div class='tableBoxDiv'>
          <a-table size="small" :scroll="{ x: 1190, y: 340 }" :columns="columns" :data-source="data" :pagination="false"
            bordered>
            <div slot="title" slot-scope="currentPageData">
              <div class='topInfo' style="display:flex">
                <h3 style="width:120px">导弹状态</h3>
                <a-descriptions style="width:35%" title="" size="small" :column='2'>
                  <a-descriptions-item label="上行速率档">
                    {{ formData.upSpeedRange ? formData.upSpeedRange : '*' }}
                  </a-descriptions-item>
                  <a-descriptions-item label="下行速率档">
                    {{ formData.downSpeedRange ? formData.downSpeedRange : '*' }}
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
            <div slot="cfp" slot-scope="text, record">
              {{ formatcfp(record.localOscillator) }}
              <!-- <span v-else>——</span> -->
            </div>
            <div slot="action" slot-scope="text, record">
              <!-- <a @click="handleEdit(record)" >状态查询</a> -->
              <a-popconfirm overlayClassName="poperLayTable" title="确定发送状态查询指令吗?"
                @confirm="() => onChangeCar(record.identificationCode)">
                <a href=''>状态查询</a>
              </a-popconfirm>
              <!-- <span v-else>——</span> -->
            </div>
            <!-- <div slot="positionInformation" slot-scope="text, record">
                              <a @click="handleEdit(record)" >详情</a>
                          </div>
                          <div slot="speedInformation" slot-scope="text, record">
                              <a @click="handleEdit(record)" >详情</a>
                          </div> -->
          </a-table>

        </div>

        <!-- </div> -->
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/less/dashborder.less'
import $ from 'jquery'
import { getAction, httpAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import { format } from 'echarts'

export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },

  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        if (msg.cmd == 'HOME_REFRESH') {
          this.getList()
        }
      },
    },
  },
  data() {
    return {
      formData: {},
      form: {},
      data: [],
      // localOscillatorList: [
      //   { label: '1', value: '1', cfp: '5540' },
      //   { label: '2', value: '2', cfp: '5560' },
      //   { label: '3', value: '3', cfp: '5580' },
      //   { label: '4', value: '4', cfp: '5600' },
      //   { label: '5', value: '5', cfp: '5620' },
      //   { label: '6', value: '6', cfp: '5640' },
      //   { label: '7', value: '7', cfp: '5660' },
      //   { label: '8', value: '8', cfp: '5680' },
      //   { label: '9', value: '8', cfp: '5700' },
      //   { label: '10', value: 'A', cfp: '5720' },
      //   { label: '11', value: 'B', cfp: '5740' },
      //   { label: '12', value: 'C', cfp: '5760' },
      //   { label: '13', value: 'D', cfp: '5780' },
      //   { label: '14', value: 'E', cfp: '5800' },
      //   { label: '15', value: 'F', cfp: '5820' },
      // ],
      columns: [
        {
          title: '指控车',
          dataIndex: 'identificationCode',
          key: 'identificationCode',
          width: 80,
          customRender: (value, row, index) => {
            if (value) {
              const obj = {
                children: value,
                attrs: {},
              }
              obj.attrs.rowSpan = row.identificationCoderowSpan
              return obj
            } else {
              return '——'
            }
          },
        },
        {
          title: '本振号',
          dataIndex: 'localOscillator',
          key: 'localOscillator',
          width: 80,
          //  customRender: (value, row, index) => {
          //    if(value){
          //           const obj = {
          //           children: value,
          //           attrs: {},
          //         }
          //         obj.attrs.rowSpan = row.localOscillatorrowSpan
          //         return obj
          //   }else{
          //     return '——'
          //   }
          // },
        },

        {
          title: '中心频点',
          // dataIndex: 'cfp',
          key: 'cfp',
          width: 90,
          scopedSlots: { customRender: 'cfp' },
          // customRender: function (text,record) {
          //   return  this.formatcfp(record.localOscillator)
          // }
          //  customRender: (value, row, index) => {
          //    if(value){
          //           const obj = {
          //           children: value,
          //           attrs: {},
          //         }
          //         obj.attrs.rowSpan = row.cfprowSpan
          //         return obj
          //   }else{
          //     return '——'
          //   }
          // },
        },

        {
          title: '分配信道',
          dataIndex: 'digitalFilter',
          key: 'digitalFilter',
          width: 150,
          customRender: function (text) {
            return text ? text : '——'
          }
        }, {
          title: '导弹',
          width: 80,
          dataIndex: 'missileIdentificationCode',
          key: 'missileIdentificationCode',
          customRender: function (text) {
            return text ? text : '——'
          }
        },
        //  {
        //   title: '占用信道数量',
        //   dataIndex: 'zhanyongxindaoshul',
        //   key: 'zhanyongxindaoshul',
        //  },
        {
          title: '占用信道号',
          dataIndex: 'occupationDigitalFilter',
          key: 'occupationDigitalFilter',
          width: 140,
          customRender: function (text) {
            return text ? text : '——'
          }
        }, {
          title: '使用信道号',
          dataIndex: 'usedDigitalFilter',
          key: 'usedDigitalFilter',
          width: 130,
          customRender: function (text) {
            return text ? text : '——'
          }
        }, {
          title: '在网状态',
          dataIndex: 'onlineStatus',
          key: 'onlineStatus',
          width: 90,
          customRender: function (text) {
            return text ? text : '——'
          }
        },
        {
          title: '直传启动状态',
          dataIndex: 'directTransmissionStatus',
          key: 'directTransmissionStatus',
          width: 80,
          customRender: function (text) {
            return text ? text : '——'
          }
        },
        //     {
        //   title: '上行速率档 ',
        //   dataIndex: 'sxsld',
        //   key: 'sxsld',
        //   customRender: function (text) {
        //     return text ? text : '——'
        //   }
        // },{
        //   title: '下行速率档 ',
        //   dataIndex: 'xzxxsld',
        //   key: 'xzxxsld',
        //   customRender: function (text) {
        //     return text ? text : '——'
        //   }
        // },
        {
          title: '下行信噪比 ',
          dataIndex: 'radio',
          key: 'radio',
          width: 80,
          customRender: function (text) {
            return text ? text : '——'
          }
        }, {
          title: '设备状态',
          dataIndex: 'deviceStatus',
          key: 'deviceStatus',
          width: 90,
          customRender: function (text) {
            return text ? text : '——'
          }
        },
        //  {
        //   title:"位置信息",
        //   key: 'positionInformation',
        //   width:60,
        //   scopedSlots: { customRender: 'positionInformation' },
        // },
        //  {
        //   title:"速度信息",
        //   key: 'speedInformation',
        //   width:60,
        //   scopedSlots: { customRender: 'speedInformation' },
        // },
        {
          title: "操作",
          key: 'action',
          scopedSlots: { customRender: 'action' },
        }
        //   {
        //   title: '占用中频',
        //   dataIndex: 'intermediateFrequency',
        //   key: 'intermediateFrequency',
        //   width:120,

        //  },
        // {
        //   title: '信道号',
        //   dataIndex: 'digitalFilter',
        //   key: 'digitalFilter',
        //   width:100,
        //  },

        //  {
        //   title: '占用弹',
        //   dataIndex: 'missileIdentificationCode',
        //   key: 'missileIdentificationCode',
        //   customRender: function (text) {
        //     if(text){
        //       return text
        //     }else{
        //       return '/'
        //     }
        //   },
        //  },

      ],
      localOscillatorList: [
        { label: '0', value: '0', cfp: '5540' },
        { label: '1', value: '1', cfp: '5560' },
        { label: '2', value: '2', cfp: '5580' },
        { label: '3', value: '3', cfp: '5600' },
        { label: '4', value: '4', cfp: '5620' },
        { label: '5', value: '5', cfp: '5640' },
        { label: '6', value: '6', cfp: '5660' },
        { label: '7', value: '7', cfp: '5680' },
        { label: '8', value: '8', cfp: '5700' },
        { label: '9', value: '9', cfp: '5720' },
        { label: '10', value: 'A', cfp: '5740' },
        { label: '11', value: 'B', cfp: '5760' },
        { label: '12', value: 'C', cfp: '5780' },
        { label: '13', value: 'D', cfp: '5800' },
        { label: '14', value: 'E', cfp: '5820' },
      ],
      statusList: [],
      colorList: ['#f51616', '#e0f17a', ' #f57dab', 'rgb(123, 243, 93)'],
      tagList: ['redTag', 'yellowTag', 'pinkTag', 'employTag'],
      statusList1: [],
      legendList: [
        // { identificationCode: "2100", slot: [0, 1] },
        // { identificationCode: "2200", slot: [2] },
        // { identificationCode: "2300", slot: [3] },
        // { identificationCode: "2400", slot: [4] },
      ],
      url: {
        sendPackage: "/channel/nmcChannelInfo/sendPackage",
        getLocalOscillatorInfo: "/telemetryInfo/nmcTelemetryInfo/getLocalOscillatorInfo",
        getResourceOccupancy: '/commandVehicle/nmcCommandVehicle/getByCurrentDayOfCommandVehicleResourceUsageExcludeRetired'
      }
    }
  },
  created() {

    this.init()
    let propsList = ['identificationCode']
    propsList.map((item) => {
      this.data = [...this.changeData(this.data, item)]
      // this.getList()
    })
  },
  mounted() {

    this.getList()

  },
  methods: {
    onChangeCar(value) {
      let params1 = {
        nmcPackageGridValues: [
          {
            gridCode: '19-接收端识别码',
            packageGridValue: value,
          },
        ],
        packageCode: '19弹载终端网络状态查询指令',
      }
      httpAction(this.url.sendPackage, params1, 'post').then((res) => {
        if (res.code == 200) {
          this.$message.success('弹载终端网络状态查询指令已发送！')

        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleEdit() { },
    changeData(data, field) {
      let count = 0 //重复项的第一项
      let indexCount = 1 //下一项
      while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0] //获取没有比较的第一个对象
        if (!item[`${field}rowSpan`]) {
          item[`${field}rowSpan`] = 1 //初始化为1
        }
        if (item[field] === data[indexCount][field]) {
          //第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
          item[`${field}rowSpan`]++
          data[indexCount][`${field}rowSpan`] = 0
        } else {
          count = indexCount
        }
        indexCount++
      }
      return data
    },
    getList() {
      getAction(this.url.getResourceOccupancy).then(res => {
        if (res.success) {
          this.legendList = []
          this.statusList1 = []
          this.data = []
          let data = res.result.homePagePartTwoListVos
          this.formData = res.result.objVo
          this.legendList = data.slotUsageInfoList
          this.statusList1 = data.digitalFilterUsageInfoList
          this.data = data
          // this.data=data.digitalFilterUsageInfoList
          // this.initPseudoClasses()
          let propsList = ['identificationCode', 'intermediateFrequency']
          propsList.map((item) => {
            this.data = [...this.changeData(this.data, item)]
          })
          console.log(data, '=====data====');
        } else {
          this.$message.error(res.message)
        }
      })

      // getAction(this.url.getLocalOscillatorInfo).then(res => {
      //   if (res.success) {
      //     this.form.localOscillator = res.result
      //     this.form.cfp = this.localOscillatorList.find(i => i.value == res.result).cfp
      //   } else {
      //     this.$message.error(res.message)
      //   }
      // })

    },
    formatcfp(val) {
      let text = this.localOscillatorList.find(i => i.value == val).cfp
      if (text) {
        return text
      } else {
        return '——'
      }
    },
    initPseudoClasses() {
      let div = document.getElementById('spanBox')
      div.innerHTML = ''
      const arr = Array.from(document.getElementsByClassName('tableBox'))
      arr.forEach(i => {
        i.style.background = 'transparent'
      })
      let { colorList, tagList } = this
      this.legendList.forEach((i, index) => {
        let newSpan = document.createElement('span')
        newSpan.innerHTML = i.identificationCode
        newSpan.style.marginRight = '8px'
        //添加伪类元素---
        var style = document.createElement("style");
        style.type = "text/css";
        let css = `.${tagList[index]}:before{content:'';margin-right: 5px;border: 0.1px solid #7e7c7c;width: 12px;height: 12px;display: inline-block;background: ${colorList[index]};}`
        style.appendChild(document.createTextNode(css))
        newSpan.appendChild(style)
        //添加伪类元素---
        newSpan.setAttribute("class", tagList[index])
        div.appendChild(newSpan)
        // i.bgColor = colorList[index]
        console.log(i, 'index')
        i.usageSlot.forEach(j => {
          document.getElementsByClassName('tableBox')[Number(j) + 1].style.background = colorList[index]
        })
      })
    },
    hideBox() {
      $('.showBox').fadeToggle(1000)
    },
    init() {
      for (let i = 0; i < 128; i++) {
        this.statusList1.push({ status: Math.round(Math.random()), index: i })
      }
      // this.statusList1 = this.statusList1.filter(i => i.status == 1)
    },
  },
}
</script>

<style lang="less" scoped>
.windowInfo1 {
  height: calc(100% - 300px);
}

// .showBox{
.topInfo {
  width: 100%;
  // padding-left:10px;
  // padding-right:10px;
  display: flex;
  justify-content: space-between;
}

// }
.tableBoxDiv {
  .ant-table-header {
    background: transparent !important;
  }

  .ant-table .ant-table-thead>tr>th {
    background: transparent !important;
  }
}

.ant-table-thead {
  background: rgba(30, 36, 50, 0) !important;
}

// .windowInfo{

//     padding: 10px 5px;
// }
// .windowInfo .ant-table-wrapper {
//   color: #fff;
//   background: rgba(30, 36, 50, 0) !important;
// }
// .windowInfo ,
// .windowInfo  .ant-card-head,
// .windowInfo  .ant-card-body {
//   background: rgba(30, 36, 50, 0) !important;
// }
// .tableContainer {
//   width: 380px;
//   max-height: 170px;
//   overflow: auto;
//   display: flex;
//   // border: solid 0.1px rgb(87, 217, 249);
//   flex-wrap: wrap;
//   margin: 0 auto;
//   padding: 1px;
//   .tableBox {
//     box-sizing: border-box;
//     // min-width
//     // height: 12px;
//     // border: solid 0.1px rgb(148, 148, 148);
//     span {
//       box-sizing: border-box;
//       width: 12px;
//       height: 12px;
//       border: solid 0.1px rgb(148, 148, 148);
//     }
//   }
//   .tableItem {
//     width: 12px;
//     height: 12px;
//     text-align: center;
//     line-height: 12px;
//     border: solid 0.1px rgb(148, 148, 148);
//     // border: solid 0.1px rgb(87, 217, 249);
//   }
//   .tableItem1 {
//     width: 30px;
//     height: 30px;
//     text-align: center;
//     line-height: 30px;
//     border: solid 0.1px rgb(148, 148, 148);
//     // border: solid 0.1px rgb(87, 217, 249);
//   }
// }
// .red {
//   background-color: #f51616;
// }
// .redTag::before {
//   content: '';
//   display: inline-block;
//   height: 12px;
//   width: 12px;
//   border: 0.1px solid #7e7c7c;
//   margin-right: 5px;
//   background: #f51616;
// }
// .pink {
//   background-color: #f57dab;
// }
// .pinkTag::before {
//   content: '';
//   display: inline-block;
//   height: 12px;
//   width: 12px;
//   border: 0.1px solid #7e7c7c;
//   margin-right: 5px;
//   background: #f57dab;
// }
// .yellow {
//   background-color: #e0f17a;
// }
// .yellowTag::before {
//   content: '';
//   display: inline-block;
//   height: 12px;
//   width: 12px;
//   border: 0.1px solid #7e7c7c;
//   margin-right: 5px;
//   background: #e0f17a;
// }
// .redTag,
// .pinkTag,
// .yellowTag,
// .employTag,
// .emptyTag {
//   float: right;
//   font-size: 14px;
//   line-height: 30px;
//   margin-right: 5px;
// }
// .employTag::before {
//   content: '';
//   display: inline-block;
//   height: 12px;
//   width: 12px;
//   border: 0.1px solid #7e7c7c;
//   margin-right: 5px;
//   background: rgb(123, 243, 93);
// }

// .employ {
//   width: 30px;
//   height: 30px;
//   line-height: 30px;
//   text-align: center;
//   box-sizing: border-box;
//   border: 0.1px solid #7e7c7c;
//   background-size: 50px 50px;
//   background-color: rgb(123, 243, 93);
//   background-image: -webkit-linear-gradient(
//     -45deg,
//     rgba(133, 201, 56, 0.2) 25%,
//     transparent 25%,
//     transparent 50%,
//     rgba(139, 248, 96, 0.2) 50%,
//     rgba(116, 115, 115, 0.2) 75%,
//     transparent 75%,
//     transparent
//   );
//   background-image: linear-gradient(
//     -45deg,
//     rgba(107, 106, 106, 0.2) 25%,
//     transparent 25%,
//     transparent 50%,
//     rgba(134, 132, 132, 0.2) 50%,
//     rgba(117, 116, 116, 0.2) 75%,
//     transparent 75%,
//     transparent
//   );
// }
// .windowInfo {
//   position: relative;
//   min-width: 40px;
//   min-height: 40px;
//   h3 {
//     color: #fff;
//     // color: rgb(87, 217, 249);
//   }
//   color: #fff;
//   // padding: 10px;
//   background: rgba(30, 36, 50, 0.6) !important;
// }
// .emptyTag::before {
//   display: inline-block;
//   content: '';
//   height: 12px;
//   width: 12px;
//   margin-right: 5px;
//   border: 0.1px solid #7e7c7c;
//   background: #fff;
// }
// .empty {
//   background-size: 50px 50px;
//   background-color: #fff;
//   // background-color: rgb(68, 69, 70);
//   background-image: -webkit-linear-gradient(
//     -45deg,
//     rgba(255, 255, 255, 0.2) 25%,
//     transparent 25%,
//     transparent 50%,
//     rgba(255, 255, 255, 0.2) 50%,
//     rgba(116, 115, 115, 0.2) 75%,
//     transparent 75%,
//     transparent
//   );
//   background-image: linear-gradient(
//     -45deg,
//     rgba(107, 106, 106, 0.2) 25%,
//     transparent 25%,
//     transparent 50%,
//     rgba(134, 132, 132, 0.2) 50%,
//     rgba(117, 116, 116, 0.2) 75%,
//     transparent 75%,
//     transparent
//   );
// }</style>
<style>
/* .ant-table-tbody tr td{
    white-space: break-spaces;
   } */
.ant-table-thead>tr>th,
.ant-table-tbody>tr>td {
  /* padding: 16px 16px !important; */
  word-break: break-word !important;
  -ms-word-break: break-all !important;
}
</style>
